<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/24.png" alt="">
      </div>
      <h2>24h流量/压力监测</h2>
    </div>
    <div class="warning_echarts">
      <div class="warning_main"></div>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      data: []
    }
  },
  async created() {
    const res = await api.ToDayFlow({ tenantid: 1128 })
    this.data = res.data
    this.initChart(res.data)
    // console.log(this.data)
  },
  mounted() {
    // this.initChart()
    // //根据窗口变化自动调节图表大小
    // window.addEventListener('resize', () => {
    //   this.myChart.resize()
    //   // this.chartSize(document.querySelector('.warning_echarts'))
    // })
  },
  methods: {
    // 图表初始化
    initChart(data) {
      // console.log(data)
      this.myChart = this.$echarts.init(document.querySelector('.warning_main'))
      // const colors = ['#41d5ff', '#29dc8d', '#f1c642', '#16b4e5']
      let dataHeight = []
      // const dataHeight = [120, 120, 120, 120, 120, 120]
      // 流量
      const dataStart = []
      // 时间
      const date = []
      // 进口表
      // const arr2 = []
      // 出厂压力
      const arr3 = []
      data.forEach(item => {
        dataHeight.push(item.fd_water_cnt)
        dataStart.push(10)
        // arr2.push(item.in_press)
        arr3.push(item.out_press)
        date.push(item.fd_date.substring(11, 16))
      })
      const maxNum = Math.max.apply(null, [...dataHeight, ...arr3]) * 1.5

      dataStart.fill(maxNum / 6, 0, data.length)

      let maxArr = []
      for (let i = 0; i < date.length; i++) {
        maxArr.push(maxNum)
      }
      this.myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'cross' // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: 'background: #023881;border:none;color:#fff;opacity: 0.9',
          formatter(params) {
            // console.log(params)
            return `
            日期：<span style="color: #50D5FD">${params[0].axisValue}</span> <br/>
            流量：<span style="color: #50D5FD">${params[0].data}</span> <br/>
            出厂压力：<span style="color: #50D5FD">${params[3].data ? params[3].data : ''}</span>
            `
          }
        },
        grid: {
          // right: '25%',
          // top: '23%',
          // bottom: '19%',
          // left: '15%',
          // x: "12%",//x 偏移量
          // y: "7%", // y 偏移量
          // width: '100%', // 宽度
          height: '60%'
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          data: date,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#80c7e0'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#3bdfd3'
            },
            padding: [0, 0, 0, -10]
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            type: 'value',
            position: 'left',
            name: '流量/m³',
            nameTextStyle: {
              // padding: [0, 0, 0, 30] // 上右下左与原位置距离
              color: '#3bdfd3'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#80c7e0'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#3bdfd3'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'line',
                color: '#427fd5'
              }
            },
            axisTick: {
              show: true,
              inside: true,
              length: 3
            }
          },
          {
            type: 'value',
            position: 'right',
            name: '压力/Mpa',
            max: 1,
            min: 0,
            nameTextStyle: {
              // padding: [0, 0, 0, 30] // 上右下左与原位置距离
              color: '#3bdfd3'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#80c7e0'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#3bdfd3'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {      // 坐标轴的刻度
              show: true,    // 是否显示
              inside: true,  // 是否朝内
              length: 3,      // 长度
              // lineStyle: {
              //   color: '#ccc',  // 默认取轴线的颜色
              //   width: 1,
              //   type: 'solid'
              // }
            },
          }
        ],
        legend: {
          data: ['进口表', '出厂压力', '流量'],
          top: '5%',
          itemHeight: 8,
          itemWidth: 12,
          textStyle: {
            color: [],
            fontSize: '0.12rem'
          }
        },
        series: [
          {
            type: 'bar',
            stack: 'Total',
            itemStyle: {
              borderColor: 'transparent',
              color: 'transparent'
            },
            emphasis: {
              itemStyle: {
                borderColor: 'transparent',
                color: 'transparent'
              }
            },
            yAxisIndex: 1,
            barWidth: 15,
            data: dataHeight
          },
          {
            name: '流量',
            type: 'bar',
            stack: 'Total',
            // label: {
            //   show: true,
            //   position: 'inside'
            // },
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(49, 100, 158, 0.6)'
            // },
            zlevel: 4,
            itemStyle: {
              normal: {
                // 设置颜色渐变

                color: new this.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#41D9FF' },
                    { offset: 1, color: '#419EFE' },
                  ]
                ),
              }
            },
            data: dataStart
          },
          {
            data: maxArr,
            type: 'bar',
            barWidth: 30,
            barGap: '-150%',
            zlevel: 3,
            itemStyle: {
              normal: {
                // 设置颜色渐变
                color: 'rgba(49, 100, 158, 0.6)'
              }
            },
          },
          // {
          //   name: '进口表',
          //   data: arr2,
          //   // yAxisIndex: 0,
          //   type: 'line',
          //   showSymbol: true,//是否默认展示圆点
          //   symbol: 'circle',     //设定为实心点
          //   symbolSize: 5,   //设定实心点的大小
          //   zlevel: 4,
          //   itemStyle: {
          //     normal: {
          //       color: '#17cbff', //改变折线点的颜色
          //       lineStyle: {
          //         color: '#17cbff', //改变折线颜色
          //       },
          //     },
          //   },
          //   showBackground: true,
          //   yAxisIndex: 1
          // },
          {
            name: '出厂压力',
            data: arr3,
            type: 'line',
            showSymbol: true,//是否默认展示圆点
            symbol: 'circle',     //设定为实心点
            symbolSize: 5,   //设定实心点的大小
            zlevel: 4,
            itemStyle: {
              normal: {
                color: '#50e69e', //改变折线点的颜色
                lineStyle: {
                  color: '#50e69e', //改变折线颜色
                },
              },
            },
            showBackground: true,
            yAxisIndex: 1
          },
        ]
      })
      //根据窗口变化自动调节图表大小
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.modular {

  .warning_echarts {
    padding-top: 0.4rem;
    width: 100%;
    height: 85%;

    .warning_main {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
